<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="yes" name="apple-touch-fullscreen"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>alibaba</title>
    <style>
        @charset "utf-8";
        html {
            color: #000;
            background: #fff;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
            font-size: 20px
        }

        html * {
            outline: 0;
            -webkit-text-size-adjust: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
        }

        body {
            font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif
        }

        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
            margin: 0;
            padding: 0
        }

        input, select, textarea {
            font-size: 100%
        }

        input {
            -webkit-appearance: none
        }

        input:-ms-clear {
            display: none
        }

        table {
            border-collapse: collapse;
            border-spacing: 0
        }

        fieldset, img {
            border: 0
        }

        abbr, acronym {
            border: 0;
            font-variant: normal
        }

        del {
            text-decoration: line-through
        }

        address, caption, cite, code, dfn, em, th, var {
            font-style: normal;
            font-weight: 500
        }

        ol, ul {
            list-style: none
        }

        caption, th {
            text-align: left
        }

        a:hover {
            text-decoration: none
        }

        a:active {
            text-decoration: none
        }

        ins, a {
            text-decoration: none
        }

        .hidden {
            display: none
        }

        * {
            text-decoration: none
        }

        a:hover * {
            text-decoration: none
        }

        .clearfix:before, .clearfix:after {
            content: " ";
            display: table
        }

        .clearfix:after {
            clear: both
        }
    </style>
    <style>
        html, body, #page {
            height: 100%;
            background-color: #f9e7d1;
        }

        .layer {
            position: relative;
            width: 100%;
            padding-top: 100%;
        }

        #earth {
            position: fixed;
            left: -5%;
            bottom: -32%;
            width: 110%;
        }

        #earth .lay {
            top: 0;
            position: absolute;
            width: 100%;
            padding-top: 100%;
            background: url(./img/earth.png) center center no-repeat;
            background-size: auto 95%;
            -webkit-transition: 1s transform ease-in-out;
            transition: 1s transform ease-in-out;
        }

        #earth .lay-round {
            position: absolute;
            top: -15%;
            left: -15%;
            width: 130%;
            padding-top: 130%;
            background: url(./img/earth-round.png) center center no-repeat;
            background-size: auto 95%;
            -webkit-transition: 1s transform ease-in-out;
            transition: 1s transform ease-in-out;
        }

        .scenes {
            position: absolute;
            top: -20%;
            left: -20%;
            width: 140%;
            padding-top: 140%;
            -webkit-transform: rotateZ(-0.25turn);
            transform: rotateZ(-0.25turn);
            -webkit-transition: 1s transform ease-in-out;
            transition: 1s transform ease-in-out;
        }

        .scenes .per{
            position: absolute;
            text-align: center;
            top:0;
            left: 0;
            width: 100%;
            height: 20%;
        }
        .scenes .per img {
            height: 100%;
        }


        #earth .cloud {
            position: absolute;
            top: -15%;
            left: -15%;
            width: 130%;
            padding-top: 130%;
            background: url(./img/cloud.png) center center no-repeat;
            background-size: auto 100%;
            -webkit-transition: 1s transform ease-in-out;
            transition: 1s transform ease-in-out;
        }

        #earth .star {
            position: absolute;
            top: -130%;
            left: -130%;
            width: 360%;
            padding-top: 360%;
            background: url(./img/bg-star.png) center center no-repeat;
            background-size: auto 100%;
            -webkit-transition: 1s transform ease-in-out;
            transition: 1s transform ease-in-out;
        }

        .one .lay, .one .lay-round {
            -webkit-transform: rotateZ(0.25turn);
            transform: rotateZ(0.25turn);
        }
        .one .scenes{
            -webkit-transform: rotateZ(0turn);
            transform: rotateZ(0turn);
        }

        .one .cloud, .one .star {
            -webkit-transform: rotateZ(0.08turn);
            transform: rotateZ(0.08turn);
        }

        #space {
            position: fixed;
            top: -7%;
            right: 5%;
            width: 40%;
            padding-top: 40%;
            background: url(./img/space.png) center center no-repeat;
            background-size: 100% auto;
            z-index: 2;
            transition: 1s all;
        }

        .notice {
            position: fixed;
            display: flex;
            align-items:center;
            width: 100%;
            top: 10%;
            color: #3d2e23;
            font-size: 13px;
            font-family: "Microsoft YaHei";
            writing-mode: vertical-rl;
            line-height: 1.5;
            letter-spacing: 3px;
        }

        .n-1{
            padding-bottom: 40%;
            background: url(./img/phone.png) center bottom no-repeat;
            background-size: 40% auto;
        }

    </style>
</head>
<body>
<div id="page">
    <div id="space"></div>
    <div id="earth">
        <div class="layer">
            <div class="star"></div>
            <div class="cloud"></div>
            <div class="lay-round"></div>
            <div class="lay"></div>
            <div class="scenes">
                <div class="per">
                    <img src="./img/p1.png"/>
                </div>
            </div>
        </div>
    </div>

    <div class="notice n-1">
        <div class="n1">
            任何人只要有一部手机<br/>就可以参与全球贸易
        </div>
    </div>
</div>
</body>
<script src="./zepto.js"></script>
<script>
    $(function () {
        setTimeout(function () {
            $("#earth").addClass('one');
        }, 1000)
    })
</script>
</html>	